<template>
	<view>
		<!-- 引入首页的导航条 -->
		<nav-bar>
			<!-- 当没有选中文件的时候显示的顶部bar -->
			<template v-if="checkCount === 0 ">
				<!-- 左边的插槽 -->
				<!-- 字体大小35rpx 左边的外边距是30rpx-->
				<text class="font-md ml-3" slot="left">首页</text>
				<!-- 右边的插槽  这里是两个并列的view所以用template进行包裹-->
				<template slot="right">
					<!-- 最右边的图标 flex布局，垂直居中，水平居中 背景浅灰色  圆角 -->
					<view class="flex align-center justify-center bg-light rounded-circle mr-3"
						style="width: 60upx;height: 60upx;" @click="openAddDialog">
						<text class="iconfont icon-zengjia "></text>
					</view>
					<view class="flex align-center justify-center bg-light rounded-circle  mr-3"
						style="width: 60upx;height: 60upx;">
						<text class="iconfont icon-gengduo "></text>
					</view>
				</template>
			</template>
			<!-- 当有选中文件的时候的顶部bar -->
			<template v-else>
				<!-- 最左边 文字大小35px 左侧外边距30upx 蓝色-->
				<view slot="left" class="font-md ml-3 text-primary" @click="handCheckAll(false)">取消</view>
				<!-- 中间显示已选择的文件的数量 -->
				<text class="font-md font-weight-bold">已选中{{checkCount}}个</text>
				<!-- 右边 -->
				<view slot="right" class="font-md mr-3 text-primary" @click="handCheckAll(true)">全选</view>
			</template>
		</nav-bar>

		<!-- 搜索框 -->
		<!-- px就是x轴上左右的内边距，py就是y轴上上下的边距 -->
		<view class="px-3 py-2">
			<!-- 搜索框的内容  生成相对定位的元素-->
			<view class="position-relative">
				<!-- 搜索图标  70upx的方块，绝对定位，距离顶部0，距离左边0， class里面的样式是 flex布局，主轴侧轴都居中，内容的颜色是#A9A5A0 浅灰色-->
				<view style="height: 70upx; width: 70upx;position: absolute;top: 0;left: 0;"
					class="flex align-center justify-center text-light-muted">
					<!-- 图标样式  -->
					<text class="iconfont icon-sousuo"></text>
				</view>
				<!-- 搜索输入框  style给图标让位  class设置为背景颜色浅灰色，字体大小35upx， 圆角矩形-->
				<input type="text" style="height: 70upx; padding-left: 70upx;" placeholder="搜索网盘文件"
					class="bg-light font-md rounded-circle" />
			</view>
		</view>



		<!-- 这里引入 文件列表组件  遍历文件组件,将item和index传给子组件，让子组件处理-->
		<!-- 通过@selected事件接受子组件的事件，  将子组件的事件传递给本组件的selected方法处理 -->
		<f-list v-for="(item,index) in list" :key="index" :item="item" :index="index" @selected="selected"
			@click="doEvent(item)"> </f-list>
		<!-- 底部操作条 -->
		<view v-if="checkCount > 0">
			<!-- 空白占位条 -->
			<view style="height: 115upx;"></view>
			<!-- 底部条子的高度115upx  flex布局  纵向拉伸 背景颜色为蓝色 文字白色 -->
			<view style="height: 115upx;" class="flex align-stretch bg-primary text-white fixed-bottom">
				<!-- 添加点击事件，点击图表，弹出对话框 -->
				<view class="flex-1 flex flex-column align-center justify-center" style="line-height: 1.5;"
					v-for="(item,index) in actions" :key="index" hover-class="bg-hover-primary"
					@click="handBottomEvent(item)">
					<text class="iconfont" :class="item.icon"></text>
					{{item.name}}
				</view>
			</view>
		</view>

		<!-- 删除的弹出条 -->
		<f-dialog ref="delete" title="删除">确认删除?</f-dialog>
		<!-- 重命名的弹出条 -->
		<f-dialog ref="rename" title="重命名">
			<input type="text" v-model="renameValue" class="flex-1 bg-light rounded px-2" style="height: 95upx;" />
		</f-dialog>
		<!-- 新建文件夹的弹出条 -->
		<f-dialog ref="newDir" title="新增文件夹">
			<input type="text" v-model="newDirName" class="flex-1 bg-light rounded px-2" style="height: 95upx;" />
		</f-dialog>


		<!-- 添加的操作条 根据uni-popup里面的描述，这个type的取值决定它在哪里弹出 -->
		<uni-popup type="bottom" ref="addFile">
			<!-- 高度200upx, 背景颜色为白色  开启flex布局 -->
			<view class="bg-white flex" style="height: 200upx;">
				<!-- 遍历要操作的四个要素 每个要素占用的空间一致  开启flex布局 XY轴都居中，改变子元素排列的主轴方向  手指点中的时候，变成浅灰  -->
				<view class="flex-1 flex align-center justify-center flex-column" hover-class="bg-light"
					v-for="(item,index) in iconlist" :key="index" @tap="handleAddEvent(item)">
					<!-- 图表的大小是宽高都110upx， 将样式编程圆形  背景色为浅灰  图标  开启flex布局，xy轴都居中  icon和颜色都是用的item里面的 -->
					<text style="width: 110upx;height: 110upx;"
						class="rounded-circle bg-light iconfont flex align-center justify-center"
						:class="item.icon+' '+item.color "></text>
					<text class="font text-muted">{{item.name}}</text>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	//引入uni-popup
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	//引入弹出层的组件
	import fDialog from '@/components/common/f-dialog.vue';
	//引入官方组件，处理最顶部的样式  @表示根目录
	import navBar from "@/components/common/nav-bar.vue"
	//引入文件列表组件
	import fList from "@/components/common/f-list.vue"
	export default {
		components: {
			navBar,
			fList,
			fDialog,
			uniPopup
		},
		//计算属性
		computed: {
			//动态计算选中数量
			checkCount() {
				return this.list.filter(item => item.checked).length
			},
			//动态计算底部操作条
			actions() {
				if (this.checkCount > 1) {
					return [{
						name: "下载",
						icon: "icon-xiazai"
					}, {
						name: "删除",
						icon: "icon-shanchu"
					}]
				}
				return [{
						name: "下载",
						icon: "icon-xiazai"
					},
					{
						name: "分享",
						icon: "icon-fenxiang-1"
					},
					{
						name: "删除",
						icon: "icon-shanchu"
					},
					{
						name: "重命名",
						icon: "icon-chongmingming"
					}
				]
			}
		},
		data() {
			return {
				//新建文件夹的名字
				newDirName: "",
				//添加文件的图标list
				iconlist: [{
						icon: "icon-file-b-2",
						color: "text-warning", //黄色
						name: "新建文件夹"
					},
					{
						icon: "icon-file-b-6",
						color: "text-success", //绿色
						name: "上传图片"
					},
					{
						icon: "icon-file-b-9",
						color: "text-primary", //蓝色
						name: "上传视频"
					},
					{
						icon: "icon-file-b-8",
						color: "text-muted", //深灰色
						name: "上传文件"
					}
				],
				renameValue: "",
				//制造假数据，模拟真实效果
				list: [{
						type: "dir",
						name: "我的笔记",
						create_time: "2022-01-20 22:00",
						checked: false
					},
					{
						type: "image",
						name: "风景.jpg",
						//新增data属性，存储图片路径
						data:"/static/logo.png",
						create_time: "2022-01-20 22:00",
						checked: false
					},
					{
						type: "image",
						name: "悟空.jpg",
						//新增data属性，存储图片路径
						data:"/static/hashiqi.jpg",
						create_time: "2022-01-20 22:00",
						checked: false
					},
					
					{
						type: "video",
						name: "快乐的一天.mp4",
						create_time: "2022-01-20 22:00",
						checked: false
					},
					{
						type: "text",
						name: "九阴白骨爪.txt",
						create_time: "2022-01-20 22:00",
						checked: false
					},
					{
						type: "none",
						name: "压缩包.rar",
						create_time: "2022-01-20 22:00",
						checked: false
					},

				]
			}
		},
		onLoad() {

		},
		methods: {
			//文件列表点击事件处理
			doEvent(item) {
				//判断点击到的文件类型
				switch (item.type) {
					//如果点击的是图片就触发预览图片的功能
					case "image":
					//获取所有的图片的链接，将其组成为数组
					let images= this.list.filter(item=>item.type==="image")
						//预览图片
						uni.previewImage({
               //当前文件的索引值
							 current:item.data,
							 //需要预览的图片链接列表
							 urls: images.map(item=>item.data)
						})
						break;
					default:
						break;
				}

			},
			//点击底部操作条事件的处理函数
			handleAddEvent(item) {
				//先关闭原本底部的操作条
				this.$refs.addFile.close()
				//判断操作意图
				switch (item.name) {
					//如果操作意图是 新建文件夹
					case "新建文件夹":
						//那么就打开弹出框   并传递一个匿名函数进去
						this.$refs.newDir.open((close) => {
							//不允许文件夹的名字为空，如果为空 就提示
							if (this.newDirName.trim() === "") {
								return uni.showToast({
									title: "文件夹名字不能为空",
									icon: "none"
								})
							}
							//按照上面的文件的格式，组装一个对象，存入到原本的list里面
							this.list.push({
								type: "dir",
								name: this.newDirName,
								create_time: "2022-01-20 22:00",
								checked: false
							})
							//给个提示
							uni.showToast({
								title: "新增文件夹完成",
								icon: "none"
							})
							//将传入的close转变为函数类型   其实这里不一定要叫close，只要和上面对应就行
							close()
						})
						break;
					default:
						break;
				}
			},
			//打开 添加的 dialog
			openAddDialog() {
				this.$refs.addFile.open()
			},
			selected(e) {
				//重新赋值    拿到子组件传过来的索引和checked的状态，修改本组件内对应的索引和状态
				this.list[e.index].checked = e.value
			},
			//处理全选或者全不选的方法
			handCheckAll(status) {
				this.list.forEach(item => item.checked = status)
			},
			handBottomEvent(item) {
				//使用switch case判断事件意图并处理
				switch (item.name) {
					case "删除":
						//调用  /components/common/f-dialog.vue中的open()方法
						this.$refs.delete.open((close) => {
							//只留下未选中的文件
							this.list = this.list.filter(item => !item.checked)
							//关闭 ---如果父组件传入了这个 close()函数，就关闭，如果没有传入，就不会关闭
							close()
						})
						break;
					case "重命名":
						//获取被选中的文件的后缀  只有当选中的数据只有一条的时候才有重命名选项，所以直接赋值给这个,展示给用户看
						let beSeletedName = this.list.filter(item => item.checked)[0].name
						//文件名 -- 如果是个文件夹，那么选中的字符串就是文件名
						let fileName = beSeletedName.substring(0, beSeletedName.lastIndexOf(".")).length === 0 ?
							beSeletedName : beSeletedName.substring(0, beSeletedName.lastIndexOf("."))
						//后缀名--如果是个文件夹，就没有后缀名，那么后缀名就是空字符串
						let beSeletedNameLast = beSeletedName.substring(beSeletedName.lastIndexOf(".")) === fileName ? "" :
							beSeletedName.substring(beSeletedName.lastIndexOf("."))
						//不展示文件后缀给用户
						this.renameValue = fileName
						this.$refs.rename.open((close) => {
							//当renameValue的值被改变之后，判断是否为空字符串""，如果是空字符串，就弹出提示框
							if (this.renameValue.trim() === "") {
								return uni.showToast({
									title: "文件名不能为空",
									icon: "none"
								})
							}
							//将双向绑定的值传递给被选中的这个文件,
							this.list.filter(item => item.checked)[0].name = this.renameValue + beSeletedNameLast
							close()
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>

</style>
